<template>
    <div class="list_container flex both-100">
      <Breadcrumb :title="pageTitle" />
      <div class="content_container">
        <el-form ref="searchMap" class="serach_wrapper flex-space-between" :inline="true" :model="searchMap">
          <div class="search">
            <el-form-item prop="plateNo" size="small">
              <el-input v-model="searchMap.plateNo" placeholder="请输入车牌号" clearable @keyup.enter.native="btn_primary" />
            </el-form-item>
            <el-form-item class="flex">
              <el-button @click="handleSearch()" class="btn_primary">查询</el-button>
              <el-button @click="handleReset()" class="btn_cancel">重置</el-button>
            </el-form-item>
          </div>
          <div class="edit flex">
            <!-- <el-button icon="el-icon-plus" class="btn_primary" @click="handleAdd()">
              新增
            </el-button> -->
          </div>
        </el-form>
        <div class="table_container">
          <el-table stripe v-loading="loading" :data="vehicleInfoList">
            <el-table-column type="index" label="序号" align="center"></el-table-column>
            <el-table-column prop="plateNo" label="车牌号" align="center"></el-table-column>
            <el-table-column prop="alarmTime" label="报警时间" align="center"></el-table-column>
            <el-table-column prop="depName" label="车辆所属分组" align="center"></el-table-column>
            <el-table-column prop="location" label="位置" align="center"></el-table-column>
            <el-table-column prop="longitude" label="经度" align="center"></el-table-column>
            <el-table-column prop="latitude" label="纬度" align="center"></el-table-column>
            <el-table-column prop="speed" label="时速" align="center"></el-table-column>
            <el-table-column prop="processType" label="报警处理状态" align="center"></el-table-column>
            <el-table-column prop="alarmSource" label="主动报警描述" align="center">
            </el-table-column>
            <el-table-column prop="alarmType" label="报警类型" align="center">
              <template slot-scope="scope">
                    <span style="color: red">{{ scope.row.alarmType }}</span>
                </template>
            </el-table-column>
            <!-- <el-table-column label="操作" width="300" align="center">
              <template slot-scope="scope">
                <span type="text" class="tag_primary" size="small" @click="handleDetails(scope.row)">详情</span>
              </template>
            </el-table-column> -->
          </el-table>
        </div>
        <pagination v-if="total>0" :total="total" :page.sync="searchMap.pageNum" :limit.sync="searchMap.pageSize" @change="getVehicleInfoList" />
      </div>
      <el-dialog title="车辆信息:" class="m_dialog" :visible.sync="dialogVisableVisitor" :close-on-click-modal="false">
  
      </el-dialog>
    </div>
  </template>
  
  <script>
  import { listVehicTrajector, getVehicleInfoDetail } from '@/api'
  import { vehicleAlarmList } from '../api/index'
  export default {
    data () {
      return {
        // 搜索数据
        searchMap: {
          pageNum: 1, // 当前页
          pageSize: 10,  // 默认条数 
          plateNo: undefined,
        },
        // 车辆信息数据
        formData: {},
        // 访客预约表单验证
        // 考试资料数据加载状态
        loading: false,
        // 条数
        total: 0,
        // 车辆信息弹框
        dialogVisableVisitor: false,
        // 标题
        title: '',
        // 车辆信息列表
        vehicleInfoList: []
      };
    },
    created () {
      this.getVehicleInfoList();
    },
    computed: {
      pageTitle () {
        return '事件中心'
      }
    },
    watch: {},
    methods: {
      isOnline (type) {
        return type ? '在线' : '离线'
      },
      getVehicleInfoList () {
        this.loading = true;
        vehicleAlarmList(this.searchMap).then(res => {
          if (200 === res.code) {
            this.vehicleInfoList = res.rows
            this.total = res.total
            this.loading = false
          }
        })
      },
      // 查询
      handleSearch () {
        this.getVehicleInfoList();
      },
      // 重置
      handleReset () {
        this.searchMap = {
          pageNum: 1, // 当前页
          pageSize: 10,  // 默认条数 
          plateNo: undefined,
        }
        this.getVehicleInfoList()
      },
      // 点击详情
      handleDetails (row) {
        const examMaterialId = row.examMaterialId
        getExamMaterialById(examMaterialId).then(res => {
          this.reset()
          this.formData = res.data
          this.dialogVisibleExamMaterial = true
        })
      },
      // 点击删除
      handleDelete (row) {
        const examMaterialId = [row.examMaterialId]
        this.$confirm('是否确认编号为"' + examMaterialId + '"的数据项？').then(res => {
          return deleteExamMaterial(examMaterialId)
        }).then(() => {
          this.getVehicleInfoList()
          this.$message.success('删除成功')
        })
      },
      // 点击新增
      handleAdd () {
        this.reset();
        this.dialogVisibleExamMaterial = true
      },
      // 重置方法
      reset () {
        this.formData = {
          examMaterialName: '', // 文件名
          remark: '', // 备注
          examMaterialFiles: [], // 文件列表
        }
        this.$nextTick(() => {
          this.$refs['form'].clearValidate()
        })
      },
      // // 提交
      // submitForm () {
      //   this.$refs['form'].validate((valid) => {
      //     if (valid) {
      //       if (this.formData.visitorId !== undefined) {
      //         updateVisitor(this.formData).then(res => {
      //           if (200 === res.code) {
      //             this.$message.success('修改成功')
      //             this.getVisitorList()
      //           }
      //         })
      //       } else {
      //         console.log(this.formData)
      //         addExamMaterial(this.formData).then(res => {
      //           if (200 === res.code) {
      //             this.$message.success('添加成功')
      //             this.dialogVisableVisitor = false
      //           }
      //           this.getExamMaterialList()
      //         })
      //       }
  
      //     }
      //   })
      // },
      // fileChange (file) {
      //   this.formData.examMaterialFiles.push(file)
      // }
    },
  }
  </script>
  <style lang='less' scoped>
  </style>